<template>
  <!-- ### 最开始多包裹了一个div所以导致对应的model-value没有从父组件获取成功 -->
  <!-- 对话框 -->
  <el-dialog
    model-value="logOutDialogVisible"
    width="40%"
    @close="handleClose"
    :show-close="false"
  >
    <!-- 使用插槽定制标题 -->
    <template #header>
      <div style="text-align: center; width: 100%; font-size: 24px;">
        登出
      </div>
    </template>
    <div class="prompt-word">你确定登出当前账号吗?</div>
    <div class="operation-button">
      <el-button class="operation-button-confirm" type="primary" @click="confirmButton">确定</el-button>
      <el-button class="operation-button-cancel" @click="cancelButton">取消</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits } from "vue";
import {useRouter} from 'vue-router'

//### 数据定义 ###
const router = useRouter();

//声明事件
const emit = defineEmits(['close-dialog'])

//### 方法定义 ###
function confirmButton() {
  //删除本地用户
  window.localStorage.removeItem('ten-seek-jwt');
  window.localStorage.removeItem('ten-seek-nickname');
  window.localStorage.removeItem('ten-seek-avatar');
  window.localStorage.removeItem('ten-seek-privilege');

  //关闭弹窗
  handleClose();

  //路由到首页
  router.push({
    name: 'home'
  })
}

function cancelButton() {
  handleClose();  //调用关闭的方法
}

//关闭操作
const handleClose = () => {
  console.log("关闭");
  emit('close-dialog'); //触发事件
};
</script>


<style scoped lang="scss">
.prompt-word {
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
}

.operation-button {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: space-between; /* 使子项在主轴上两端分布 */

  .operation-button-cancel {
    flex: 0.2;
  }

  .operation-button-confirm {
    flex: 0.2;
  }
}
</style>